<template>
    <div class="body">
        <div class="left">
            <div class="box surver">
                <p class="tit">概况</p>
                <div class="content">
                    <div class="item">
                        <dv-border-box-7 :color="['#183a90', '#06869e']">
                            <div>
                                {{day}}
                            </div>
                        </dv-border-box-7>
                        <p>今日受理</p>
                    </div>
                    <div class="item">
                        <dv-border-box-7 :color="['#183a90', '#06869e']">
                            <div>
                                {{mounth}}
                            </div>
                        </dv-border-box-7>
                        <p>本月受理</p>
                    </div>
                    <div class="item">
                        <dv-border-box-7 :color="['#183a90', '#06869e']">
                            <div>
                                91%
                            </div>
                        </dv-border-box-7>
                        <p>今日办结率</p>
                    </div>
                </div>
            </div>
            <div class="box appeal">
                <p class="tit">诉求分析</p>
                <div class="content">
                     <div id="main04" style="width: 170px; height: 140px;"></div>
                    <div id="main14" style="width: 170px; height: 140px;"></div> 
                </div>
            </div>
            <div class="box rank">
                <p class="tit">年度诉求热点部门排名</p>
                <div id="main24" style="width: 440px; height: 180px;"></div>
            </div>
            <div class="box rank">
                <p class="tit">年度诉求热点部门排名</p>
                <div id="main34" style="width: 440px; height: 180px;"></div>
            </div>
            <div class="box city">
                <p class="tit">年度诉求热点城市排名</p>
                <div class="content">
                    <div v-for="item in data" :key="item.ct" :class="{ 'active': item.distance >= 5 }">
                        <p class="ct">{{ item.ct }}</p>
                        <p class="distance">{{ item.distance }}h</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="map-container" ref="mapRef"></div>
            <div class="box bom">
                <p class="tit">热点诉求排名</p>
                <div class="content">
                    <div style="display: flex; border: 2px #0150bd solid; margin-bottom: 5px; ">
                        <div class="rank"> <b>1</b></div>
                        <div class="total">
                            <b style="color: #6fb6db;">城市综合</b>
                            <b>213241件</b>
                        </div>
                        <div class="per">
                            <div>
                                <span>TOP1</span>
                                <span>噪音污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP2</span>
                                <span>环境污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP3</span>
                                <span>空气污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP4</span>
                                <span>光污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP5</span>
                                <span>河道污染</span>
                                <span>诉求量：23456</span>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; border: 2px #0150bd solid; margin-bottom: 5px; ">
                        <div class="rank"> <b>2</b></div>
                        <div class="total">
                            <b style="color: #6fb6db;">科教文卫</b>
                            <b>213241件</b>
                        </div>
                        <div class="per">
                            <div>
                                <span>TOP1</span>
                                <span>噪音污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP2</span>
                                <span>环境污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP3</span>
                                <span>空气污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP4</span>
                                <span>光污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP5</span>
                                <span>河道污染</span>
                                <span>诉求量：23456</span>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; border: 2px #0150bd solid; margin-bottom: 5px; ">
                        <div class="rank"> <b>3</b></div>
                        <div class="total">
                            <b style="color: #6fb6db;">民生保障</b>
                            <b>213241件</b>
                        </div>
                        <div class="per">
                            <div>
                                <span>TOP1</span>
                                <span>噪音污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP2</span>
                                <span>环境污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP3</span>
                                <span>空气污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP4</span>
                                <span>光污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP5</span>
                                <span>河道污染</span>
                                <span>诉求量：23456</span>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; border: 2px #0150bd solid; margin-bottom: 5px; ">
                        <div class="rank"> <b>4</b></div>
                        <div class="total">
                            <b style="color: #6fb6db;">行业监察</b>
                            <b>213241件</b>
                        </div>
                        <div class="per">
                            <div>
                                <span>TOP1</span>
                                <span>噪音污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP2</span>
                                <span>环境污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP3</span>
                                <span>空气污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP4</span>
                                <span>光污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP5</span>
                                <span>河道污染</span>
                                <span>诉求量：23456</span>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; border: 2px #0150bd solid; ">
                        <div class="rank"> <b>5</b></div>
                        <div class="total">
                            <b style="color: #6fb6db;">经济综合</b>
                            <b>213241件</b>
                        </div>
                        <div class="per">
                            <div>
                                <span>TOP1</span>
                                <span>噪音污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP2</span>
                                <span>环境污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP3</span>
                                <span>空气污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP4</span>
                                <span>光污染</span>
                                <span>诉求量：23456</span>
                            </div>
                            <div>
                                <span>TOP5</span>
                                <span>河道污染</span>
                                <span>诉求量：23456</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="box">
                <p class="tit">诉求月度趋势分析</p>
                <div id="main44" style="width: 450px; height: 180px; background-color: #0b254f; "></div>
            </div>
            <div class="box">
                <p class="tit">诉求年度趋势分析</p>
                <div id="main54" style="width: 450px; height: 180px; background-color: #0b254f; "></div>
            </div>
            <div class="box">
                <p class="tit">本月诉求热点部门</p>
                <div id="main64" style="width: 450px; height: 180px; background-color: #0b254f; "></div>
            </div>
            <div class="box">
                <div class="wordcloud">
                  <span class="word word-large">产业数据</span>
                  <span class="word word-medium">技术保护</span>
                  <span class="word word-medium">创意产业</span>
                  <span class="word word-regular">产权争议</span>
                  <span class="word word-regular">产权争议</span>
                  <span class="word word-regular">国际合作</span>
                  <span class="word word-regular">业务情况</span>
                  <span class="word word-small">密码重置</span>
                  <span class="word word-small">智能客服</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted , onUnmounted } from 'vue';
import * as echarts from 'echarts';
import guangdongJson from './BJ.json';

const day = ref(1727)
const mounth = ref(21527)

const time = setInterval(() => {
    day.value++
    mounth.value++
}, 1000)

onUnmounted(() => {
    clearInterval(time)
})



const data = [
    { ct: "A区", distance: 1 },
    { ct: "B区", distance: 1.5 },
    { ct: "C区", distance: 2 },
    { ct: "D区", distance: 3 },
    { ct: "E区", distance: 3 },
    { ct: "F区", distance: 3.5 },
    { ct: "G区", distance: 4 },
    { ct: "H区", distance: 4.3 },
    { ct: "I区", distance: 6.1 },
    { ct: "J区", distance: 7.5 },
    { ct: "K区", distance: 8 },
    { ct: "L区", distance: 10 },
]

// 定义地图容器引用
const mapRef = ref(null);
// 图表实例变量
let chart = null;
// 初始化地图
const initMap = () => {
    // 注册地图数据
    echarts.registerMap('广东', guangdongJson);

    // 获取DOM元素并初始化图表
    if (mapRef.value) {
        chart = echarts.init(mapRef.value);

        // 标记点数据（可根据实际需求修改）
        const markPoints = [
            { name: '朝阳区', coord: [116.486409, 39.921489] },
            { name: '昌平区', coord: [116.235906, 40.218085] },
            { name: '海淀区', coord: [116.310316, 39.956074] },
            { name: '顺义区', coord: [116.653525, 40.128936] },
            { name: '密云区', coord: [116.843352, 40.377362] },
            { name: '延庆区', coord: [115.985006, 40.465325] },
            { name: '房山区', coord: [116.139157, 39.735535] },
        ];

        // 地图配置项
        const option = {
            series: [
                {
                    type: 'map',
                    mapType: '广东',
                    label: {
                        show: true,
                        color: '#ffffff' // 城市名称文字颜色
                    },
                    itemStyle: {
                        areaColor: '#2196f3', // 地图区域底色
                        borderColor: '#ffffff', // 区域边框颜色
                        borderWidth: 1
                    },
                    emphasis: {
                        // 鼠标悬停时的样式
                        itemStyle: {
                            areaColor: '#42a5f5'
                        }
                    },
                    markPoint: {
                        // 标记点样式
                        symbol: 'circle',
                        symbolSize: 12,
                        itemStyle: {
                            color: '#ffeb3b' // 标记点颜色
                        },
                        label: {
                            show: false
                        },
                        data: markPoints.map(item => ({
                            name: item.name,
                            coord: item.coord
                        }))
                    }
                }
            ]
        };

        // 设置配置项并渲染
        chart.setOption(option);
    }
};

// 窗口大小变化时重绘
const handleResize = () => {
    if (chart) {
        chart.resize();
    }
};

onMounted(() => {

    console.log(123);
    

    initMap();
    window.addEventListener('resize', handleResize);

    var chartDom = document.getElementById('main04');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal', // 确保图例水平排列
            bottom: '-20%', // 设置图例在底部
            left: 'center', // 保持水平居中
            textStyle: {
                color: 'white', // 确保图例文字为白色
                fontSize: 12 // 适当减小文字大小
            },
            itemWidth: 10, // 减小图例标记的宽度
            itemHeight: 10, // 减小图例标记的高度
            itemGap: 10 // 调整图例项之间的间距
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center',
                    color: 'white'
                },
                labelLine: {
                    show: true,
                    color: 'white'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '电话' },
                    { value: 735, name: '网站' },
                    { value: 580, name: 'App' },
                    { value: 484, name: '其他' },
                ]
            }
        ]
    };

    option && myChart.setOption(option);
    var chartDom1 = document.getElementById('main14');
    var myChart1 = echarts.init(chartDom1);
    var option1;

    option1 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal', // 确保图例水平排列
            bottom: '-20%', // 设置图例在底部
            left: 'center', // 保持水平居中
            textStyle: {
                color: 'white', // 确保图例文字为白色
                fontSize: 12 // 适当减小文字大小
            },
            itemWidth: 10, // 减小图例标记的宽度
            itemHeight: 10, // 减小图例标记的高度
            itemGap: 10 // 调整图例项之间的间距
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center',
                    color: 'white'
                },
                labelLine: {
                    show: true,
                    color: 'white'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '咨询' },
                    { value: 735, name: '诉求' },
                    { value: 580, name: '表扬' },
                    { value: 484, name: '求助' },
                    { value: 484, name: '建议' },
                ]
            }
        ],
    };

    option1 && myChart1.setOption(option1);

    var chartDom2 = document.getElementById('main24');
    var myChart2 = echarts.init(chartDom2);
    var option2;

    option2 = {
        xAxis: {
            type: 'category',
            data: ['卫计委', '交通委', '质监委', '统计局', '人社局', '食药监'],
            axisLine: {
                lineStyle: {
                    color: '#74c1e6' // 设置x轴轴线颜色为白色
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#74c1e6' // 设置x轴刻度线颜色为白色
                }
            },
            axisLabel: {
                color: '#74c1e6' // 设置x轴标签文字颜色为白色
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#74c1e6' // 设置y轴轴线颜色为白色
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#74c1e6' // 设置y轴刻度线颜色为白色
                }
            },
            axisLabel: {
                color: '#74c1e6' // 设置y轴标签文字颜色为白色
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)' // 设置网格线为半透明白色
                }
            }
        },
        series: [
            {
                data: [150, 140, 120, 100, 70, 50, 30],
                type: 'bar',
                barWidth: '30%',
                itemStyle: {
                    barBorderRadius: 8,
                }
            }
        ],
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#099df0' },
                { offset: 1, color: '#8102ff' }
            ])
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option2 && myChart2.setOption(option2);


    var chartDom3 = document.getElementById('main34');
    var myChart3 = echarts.init(chartDom3);
    var option3;

    option3 = {
        xAxis: {
            type: 'category',
            data: ['卫计委', '交通委', '质监委', '统计局', '人社局', '食药监'],
            axisLine: {
                lineStyle: {
                    color: '#74c1e6' // 设置x轴轴线颜色为白色
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#74c1e6' // 设置x轴刻度线颜色为白色
                }
            },
            axisLabel: {
                color: '#74c1e6' // 设置x轴标签文字颜色为白色
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#74c1e6' // 设置y轴轴线颜色为白色
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#74c1e6' // 设置y轴刻度线颜色为白色
                }
            },
            axisLabel: {
                color: '#74c1e6' // 设置y轴标签文字颜色为白色
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)' // 设置网格线为半透明白色
                }
            }
        },
        series: [
            {
                data: [25, 40, 60, 70, 80, 90, 100],
                type: 'bar',
                barWidth: '30%',
                itemStyle: {
                    barBorderRadius: 8,
                }
            }
        ],
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#099df0' },
                { offset: 1, color: '#8102ff' }
            ])
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option3 && myChart3.setOption(option3);

    var chartDom4 = document.getElementById('main44');
    var myChart4 = echarts.init(chartDom4);
    var option4;

    option4 = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],

            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            axisLabel: {
                color: 'white'
            },
            // 去除刻度线
            axisTick: {
                show: false
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            // 刻度文字颜色
            axisLabel: {
                color: 'white'
            },
            splitLine: {
                lineStyle: {
                    color: '#80c0e0',
                    type: 'dashed'
                }
            },
            // 去除刻度线
            axisTick: {
                show: false
            }
        },
        series: [
            {
                data: [0, 40, 90, 50, 40, 70, 147, 50, 40, 70, 100, 40],
                type: 'line',
                areaStyle: {},
                smooth: true,
                lineStyle: {
                    color: '#523ff9',
                },
            },
        ],
        areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: '#0a6aab'
                },
                {
                    offset: 1,
                    color: '#112459'
                }
            ])
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option4 && myChart4.setOption(option4);


    var chartDom5 = document.getElementById('main54');
    var myChart5 = echarts.init(chartDom5);
    var option5;

    option5 = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2019', '2020', '2021', '2022', '2023', '2024'],

            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            axisLabel: {
                color: 'white'
            },
            // 去除刻度线
            axisTick: {
                show: false
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            // 刻度文字颜色
            axisLabel: {
                color: 'white'
            },
            splitLine: {
                lineStyle: {
                    color: '#80c0e0',
                    type: 'dashed'
                }
            },
            // 去除刻度线
            axisTick: {
                show: false
            }
        },
        series: [
            {
                data: [20, 140, 40, 146, 26, 120],
                type: 'line',
                areaStyle: {},
                smooth: true,
                lineStyle: {
                    color: '#523ff9',
                },
            },
        ],
        areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: '#0a6aab'
                },
                {
                    offset: 1,
                    color: '#112459'
                }
            ])
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option5 && myChart5.setOption(option5);

    var chartDom6 = document.getElementById('main64');
    var myChart6 = echarts.init(chartDom6);
    var option6;

    var series = [
        {
            data: [100, 80, 60, 40, 30, 20, 10],
             barWidth: '30%',
            itemStyle: {
                barBorderRadius: [8,8,0,0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#10c3b3' },
                { offset: 1, color: '#ecfa0e' }
            ])
            },
            type: 'bar',
            stack: 'a',
            name: 'a'
        },
        {
            data: [100, 80, 60, 40, 30, 20, 10],
            itemStyle: {
                barBorderRadius: [8,8,0,0] ,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#3763f6' },
                { offset: 1, color: '#05a3f0' }
            ])
            },
            type: 'bar',
            stack: 'a',
            name: 'b'
        },
    ];
    const stackInfo = {};
    for (let i = 0; i < series[0].data.length; ++i) {
        for (let j = 0; j < series.length; ++j) {
            const stackName = series[j].stack;
            if (!stackName) {
                continue;
            }
            if (!stackInfo[stackName]) {
                stackInfo[stackName] = {
                    stackStart: [],
                    stackEnd: []
                };
            }
            const info = stackInfo[stackName];
            const data = series[j].data[i];
            if (data && data !== '-') {
                if (info.stackStart[i] == null) {
                    info.stackStart[i] = j;
                }
                info.stackEnd[i] = j;
            }
        }
    }
    for (let i = 0; i < series.length; ++i) {
        const data = series[i].data;
        const info = stackInfo[series[i].stack];
        for (let j = 0; j < series[i].data.length; ++j) {
            // const isStart = info.stackStart[j] === i;
            const isEnd = info.stackEnd[j] === i;
            const topBorder = isEnd ? 20 : 0;
            const bottomBorder = 0;
            data[j] = {
                value: data[j],
                itemStyle: {
                    borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
                }
            };
        }
    }
    option6 = {
        xAxis: {
            type: 'category',
            data: ['卫计委', '交通委', '质监委', '统计局', '人社局', '食药监'],
            axisLine: {
                lineStyle: {
                    color: '#74c1e6' // 设置x轴轴线颜色为白色
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#74c1e6' // 设置x轴刻度线颜色为白色
                }
            },
            axisLabel: {
                color: '#74c1e6' // 设置x轴标签文字颜色为白色
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            // 刻度文字颜色
            axisLabel: {
                color: 'white'
            },
            splitLine: {
                lineStyle: {
                    color: '#80c0e0',
                    type: 'dashed'
                }
            },
            // 去除刻度线
            axisTick: {
                show: false
            }
        },

        series: series,
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option6 && myChart6.setOption(option6);
})

</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.map-container {
    width: 100%;
    height: 520px;
    transform: translateY(-20px);
}

.body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}

.box {
    border: 1px solid #0288c3;
    padding: 10px;
    background-color: #0b254f;

    .tit {
        padding-left: 10px;
        border-left: 5px solid #02a7f0;
        margin-bottom: 5px;
    }
}

.left {
    width: 25%;
    height: 900px;

    .surver {
        width: 98%;
        height: 12%;
        margin: 0 auto;

        .content {
            display: flex;
            justify-content: space-around;
            align-items: center;

            .item {
                width: 30%;
                height: 40px;
                background-color: #183a90;
                text-align: center;
                line-height: 40px;
            }
        }
    }

    .appeal {
        width: 98%;
        height: 20%;
        margin: 10px auto;

        .content {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    }

    .rank {
        width: 98%;
        height: 22%;
        margin: 10px auto;
    }

    .city {
        width: 98%;
        height: 20%;
        margin: 10px auto;

        .content {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;

            div {
                width: 24%;
                height: 40px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                color: #fff;
                background-color: #0150bd;
                margin-bottom: 8px;
            }

            .active {
                background-color: #0b2f66;
            }
        }
    }
}

.center {
    width: 48%;
    height: 904px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .box {
        width: 100%;
        height: 48%;
    }

    .bom {
        width: 100%;
        height: 49%;
        background-color: #0b254f;
        border: 1px solid #0288c3;

        .content {
            .total {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                font-size: 20px;
                color: #fff;
                width: 160px;
            }

            .rank {
                width: 40px;
                height: 70px;
                background-color: #0150bd;
                color: white;
                font-size: 28px;
                text-align: center;
                line-height: 70px;
            }

            .per {
                width: 700px;
                height: 70px;
                display: flex;
                align-items: center;
                justify-content: space-around;

                div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    font-size: 14px;
                }
            }
        }
    }
}

.right {
    width: 25%;
    height: 900px;

    .box {
        width: 100%;
        height: 24%;
        margin-bottom: 14px;
    }
}
.wordcloud {
    width: 90%;
    height: 180px;
  
    position: relative;
    /* 作为绝对定位的容器 */
    padding: 20px;
    margin: 0 auto;
  }
  
  .word {
    position: absolute;
    color: #64b5f6;
    /* 统一蓝色系 */
    white-space: nowrap;
  }
  
  /* 不同字号的样式 */
  .word-large {
    font-size: 24px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .word-medium {
    font-size: 18px;
    font-weight: 500;
  }
  
  .word-medium:nth-child(2) {
    top: 10%;
    left: 30%;
  }
  
  .word-medium:nth-child(3) {
    top: 40%;
    left: 70%;
  }
  
  .word-regular {
    font-size: 16px;
  }
  
  .word-regular:nth-child(4) {
    top: 20%;
    left: 10%;
  }
  
  .word-regular:nth-child(5) {
    top: 60%;
    left: 75%;
  }
  
  .word-regular:nth-child(6) {
    top: 70%;
    left: 50%;
  }
  
  .word-regular:nth-child(7) {
    top: 80%;
    left: 80%;
  }
  
  .word-small {
    font-size: 14px;
  }
  
  .word-small:nth-child(8) {
    top: 50%;
    left: 20%;
  }
  
  .word-small:nth-child(9) {
    top: 90%;
    left: 10%;
  }
</style>